<template>
    <view class="pd mt40">
        <view class="kkjhjsrow" v-for="(sf,idx) in jjhgsd"  :key="idx">
        	<view class="row sderttr pt20 pm20 pr" @tap="dianhgsgd(sf)">
				<view class="jhbbbhghgse"  @tap.stop="jjhbbgsgd(sf)" >
					<uni-icons type="down"  :class="sf.zd?'act':''" color="#666972" size="18"></uni-icons>
				</view>
        		<view class="">
        			<image src="../../../static/img/xuanhsd.png" class="kjjsee cz ab" v-if="sf.cls"></image>
        			<text class="kjjsee cz f_b" v-else></text>
        		</view>
        		<view class="ml30">
        			<image src="../../../static/img/usericon.png" class="yj useertty cz"></image>
        		</view>
        		<view class="cf fz32 pl20">
        			A标签
        		</view>
        	</view>
			<view class="jjbbnxert" v-if="sf.zd">
				<view class="row sderttr pt20 pm20 pr"  v-for="(sd,idx) in sf.xiajsd" :key="idx" @tap.stop="jjhbbgsgdb(sd,sf)">
				<view class="">
						<image src="../../../static/img/xuanhsd.png" class="kjjsee cz ab" v-if="sf.cls||sd.cls"></image>
						<text class="kjjsee cz f_b" v-else></text>
					</view>
					<view class="ml30">
						<image src="../../../static/img/usericon.png" class="yj useertty cz"></image>
					</view>
					<view class="cf fz32 pl20">
						A标签
					</view>
				</view>
			</view>
        </view>
    
		<view class="quanjnnber cen" @tap="quanxuanfun">
			<view class="f_b">
				<image src="../../../static/img/xuanhsd.png" class="kjjsee cz ab" v-if="quanxuan"></image>
				<text class="kjjsee cz f_b" v-else></text>
			</view>
			<text class="ml20 cf cz fz32">全选</text>
		</view>
	</view>
</template>
<script>
    export default {
        data() {
            return {
				quanxuan:false,
				jjhgsd:[
					{
						cls:'',
						zd:false,
						xiajsd:[
							{
								cls:''
							},
							{
								cls:''
							}
						]
					},{
						cls:'',
						zd:false,
						xiajsd:[
							{
								cls:''
							},
							{
								cls:''
							}
						]
					}
				]
			}
        },
        components: {},
        methods: {
			dianhgsgd(sd){
				if(sd.cls){
					sd.cls=''
				}else{
					sd.cls='act'
				}
				
				sd.xiajsd.map(a=>{
					if(sd.cls){
						a.cls='act'
					}else{
						a.cls=''
					}
				})
				this.isquanssdf()
			},
			jjhbbgsgd(sd){
				if(sd.zd){
					sd.zd=false
				}else{
					sd.zd=true
				}
			},
			jjhbbgsgdb(sd,sf){
				if(sd.cls){
					sd.cls=''
				}else{
					sd.cls='act'
				}
				let lehgsv = sf.xiajsd.length,
				kkjjsd =0
				sf.xiajsd.map(a=>{
					if(a.cls){
						kkjjsd++
					}
				})
				if (lehgsv == kkjjsd){
					sf.cls='act'
				}else{
					sf.cls=''
				}
				this.isquanssdf()
			},
			quanxuanfun(){
				if(this.quanxuan){
					this.quanxuan=false
				} else {
					this.quanxuan=true
				}
				this.jjhgsd.map(a=>{
					if(this.quanxuan){
						a.cls='act'
					}else{
						a.cls=''
					}
					a.xiajsd.map(b=>{
						if(this.quanxuan){
							b.cls='act'
						}else{
							b.cls=''
						}
					})
				})
			},
			isquanssdf(){
				let hhgbse = this.jjhgsd.length,
				kjjhsd = 0
				this.jjhgsd.map(a=>{
					if(a.cls){
						kjjhsd++
					}
				})
				if(kjjhsd==hhgbse){
					this.quanxuan=true
				}else{
					this.quanxuan=false
				}
			}
			
		},
		onNavigationBarButtonTap() {
			uni.redirectTo({
				url:'GroupDetails'
			})
		},
        mounted() {}
    }

</script>
<style  scoped>
	.jhbbbhghgse{
		position: absolute;
		right: 0upx;
		top: 20upx;
	}
	.jjbbnxert{
		padding-left: 100upx;
	}
	.jhbbbhghgse.act{
		transform: rotate(180deg);
	}
	.quanjnnber{
		height:100upx;
		line-height: 100upx;
		background:rgba(53,60,81,1);
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		left: 0;
	}
</style>
